<template>
    <div class="newbieGuidance" :class="isGuide ? '' : 'closeContent'">
        <div class="content" :class="isGuide ? 'openContent' : 'closeContent'">
            <div class="title">
                <div class="name">系统引导</div>
                <div class="back" @click="closeNewbieGuidance">退出引导</div>
            </div>
            <div class="infoList">
                <div class="infoBox">
                    <div class="info" :class="guideIndex == index ? 'chooseIndex' : ''" v-for="info, index in contents"
                        :key="index" @click="getGuideIndex(index)">
                        <div>{{ `（${index + 1}）` }}</div>
                        <div class="text">{{ info }}</div>
                    </div>
                </div>
                <div class="step">
                    <div class="previous stepBtn" v-show="tableContentIndex" @click="previous()">上一项</div>
                    <div class="next" :class="showNext ? 'stepBtn' : 'disabledBtn'"
                        @click="() => { showNext ? next() : '' }">下一项
                    </div>
                </div>
            </div>
            <div class="tableContentsTitle">引导目录</div>
            <div class="tableContents">
                <div class="tableContent" :class="tableContentIndex == index ? 'activeItem' : 'tableContent'"
                    @click="getTableContent(index)" v-for="content, index in tableContents" :key="index">
                    {{ `${index +
                        1}、${content.name}` }}</div>
            </div>
        </div>
        <div v-show="guideInfo.index == 0 && isGuide" class="routerInfo" :style="{ top: `${routerOffsetTop + 50}px` }">
            <div class="guideText">1. {{ guideInfo.procedure && guideInfo.procedure.length > 0 ? guideInfo.procedure[0]
                : '' }}</div>
            <div class="guideNext" @click="guideNext">下一步</div>
        </div>
    </div>
</template>
<script>

export default {
    components: {},
    computed: {
        isGuide() {
            return this.$store.state.user.isGuide;
        },
        guideInfo() {
            return this.$store.state.user.guideInfo;
        },
        routerOffsetTop() {
            return this.$store.state.user.routerOffsetTop;
        },
    },
    watch: {
        guideInfo: {
            handler(v) {
                this.guideIndex = v.index;
                if (this.guideIndex == 10) {

                }
            },
            deep: true
        }
    },
    props: {
        page: {
            type: Number,
            default: 1
        },
    },
    data() {
        return {
            guideIndex: 0,
            showNext: true,
            contents: {},
            tableContentIndex: 0,
            tableContents: [
                {
                    id: 1,
                    name: '品种类型管理',
                    router: '/varietyTypeManagement',
                    infoList: [
                        '打开基础信息管理-品种类型管理，该功能用于配置实际养殖品种类型，如：虾类型、鱼类型等;',
                        '选中想要的品种类型;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 2,
                    name: '品种管理',
                    router: '/varietyManagement',
                    infoList: [
                        '打开基础信息管理-品种管理，该功能用于配置实际养殖品种，如：鲈鱼、沼虾等;',
                        '选中想要的品种;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 3,
                    name: '物料类型管理',
                    router: '/materialTypeManagement',
                    infoList: [
                        '打开基础信息管理-物料类型管理，该功能用于配置实际养殖过程中用到的物料类型，如：肥料、种苗、饲料类型等;',
                        '选中想要的物料类型;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 4,
                    name: '物料管理',
                    router: '/materialManagement',
                    infoList: [
                        '打开基础信息管理-物料管理，该功能用于配置实际养殖过程中用到的具体物料，如：膨化饲料、肥水宝、育菌宝等;',
                        '选中想要的物料;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 5,
                    name: '单位类型管理',
                    router: '/unitTypeManagement',
                    infoList: [
                        '打开基础信息管理-单位类型管理，该功能用于配置实际养殖过程中用到的单位类型，如：面积单位、体积单位、产量单位类型等;',
                        '选中想要的单位类型;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 6,
                    name: '单位管理',
                    router: '/unitManagement',
                    infoList: [
                        '打开基础信息管理-单位管理，该功能用于配置实际养殖过程中用到的单位类型，如：面积单位、体积单位、产量单位等;',
                        '选中想要的单位;',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 7,
                    name: '规格管理',
                    router: '/specificationManagement',
                    infoList: [
                        '打开基础信息管理-规格管理，该功能用于配置实际养殖过程中用到的具体单位，如：千克、升、毫升等;',
                        '点击添加按钮;',
                        '在弹出弹框中输入相关信息。',
                        '点击添加按钮即可添加成功。'
                    ]
                },
                {
                    id: 8,
                    name: '批次管理',
                    router: '/batchManagementBreeding',
                    infoList: [
                        '开批次管理-批次创建，该功能用于添加实际养殖过程中批次信息，您可根据实际情况选择某一批次信息添加;',
                        '点击添加按钮;',
                        '在弹出弹框中输入相关信息;',
                        '点击确定完成添加。'
                    ]
                },
                {
                    id: 9,
                    name: '投塘管理',
                    router: '/pondInformationManagement',
                    infoList: [
                        '打开投塘管理-投塘信息管理，该功能用于添加实际养殖过程中批次投塘信息，您可根据实际情况选择某一设施添某一批次添加投塘信息;',
                        '点击添加按钮;',
                        '在弹出弹框中输入相关信息;',
                        '点击确定完成添加。'
                    ]
                },
                // {
                //     id: 10,
                //     name: '养殖生产管理',
                //     router: '',
                //     infoList: [
                //         '框内功能为实际养殖过程中所包含的生产管理，您可根据需求选择相应功能菜单进入操作。',
                //     ]
                // }
            ]

        }
    },
    mounted() {
        setTimeout(() => {
            this.getTableContent(0);
        }, 100);
    },
    methods: {
        getTableContent(index) {
            let tableContent = this.tableContents[index];
            this.contents = tableContent.infoList;
            this.tableContentIndex = index;
            this.$store.dispatch("user/getGuideInfo", {
                procedure: this.contents,
                index: 0
            });
            this.$nextTick(() => {
                console.log('跳转：', tableContent.router)
                this.$router.push(tableContent.router);
            })
        },
        next() {
            this.tableContentIndex++
            this.getTableContent(this.tableContentIndex);
            this.showNext = (this.tableContentIndex + 1) < this.tableContents.length;
            console.log(this.tableContentIndex + 1, this.tableContents)
        },
        getGuideIndex(index) {
            let { procedure } = this.guideInfo;
            this.guideIndex = index;
            this.$store.dispatch("user/getGuideInfo", {
                procedure: procedure,
                index: index
            });
        },
        guideNext() {
            let { index, procedure } = this.guideInfo
            this.$store.dispatch("user/getGuideInfo", {
                procedure: procedure,
                index: index + 1
            });
        },
        previous() {
            this.tableContentIndex--
            this.getTableContent(this.tableContentIndex);
            this.showNext = (this.tableContentIndex + 1) <= this.tableContents.length;
        },
        closeNewbieGuidance() {
            this.$store.dispatch("user/setGuide", false);
        }
    }

};
</script>
<style lang="scss" scoped>
.newbieGuidance {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    z-index: 9999;
}

.routerInfo {
    max-width: 400px;
    padding: 10px;
    background-color: #FF9243;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 300px;
    z-index: 99999999;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    .guideText {
        width: 100%;
        text-align: left;
        line-height: 26px;
    }

    .guideNext {
        width: 100px;
        margin-top: 15px;
        background-color: #e4a579;
        border: 1px solid #c65504;
        border-radius: 4px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;

        &:hover {
            background-color: #d88244;
        }
    }
}

.content {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background-color: #EFEFEF;
    padding: 0 10px;
    font-size: 14px;

    .title,
    .infoList {
        width: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .title {
        height: 60px;
        padding: 0 15px;
        background: #4B8BC9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;

        .back {
            width: 70px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: #FFFFFF;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.16);
            border-radius: 5px;
            font-size: 14px;
            color: #4B8BC9;
            cursor: pointer;
        }

        .name {
            font-size: 18px;
            font-weight: bold;
        }
    }

    .infoList {
        height: 250px;
        line-height: 30px;
        color: #333333;

        .infoBox {
            width: 100%;
            height: calc(100% - 65px);
            padding: 10px 15px;
            overflow: auto;

            .info {
                line-height: 30px;
                display: flex;
                cursor: pointer;
            }
        }

        .step {
            width: 100%;
            color: #ffffff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 15px;

            .stepBtn,
            .disabledBtn {
                width: 100px;
                height: 36px;
                line-height: 36px;
                background: #4B8BC9;
                border-radius: 5px;
                text-align: center;
                font-size: 14px;
                margin-left: 20px;
                cursor: pointer;
            }

            .stepBtn :hover {
                background: #789bbf;
            }

            .disabledBtn {
                background-color: #999999;
                cursor: not-allowed;
            }
        }
    }

    .tableContentsTitle {
        line-height: 60px;
        color: #001E31;
        font-size: 16px;
        font-weight: bold;
        padding-left: 10px;
    }

    .tableContents {
        color: #333333;
        height: calc(100% - 380px);
        overflow: auto;
        font-size: 14px;

        .tableContent {
            background-color: #ffffff;
            margin-bottom: 2px;
            line-height: 48px;
            padding: 0 20px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                background-color: #f4f4f4;
                transform: translate(-2px);
            }
        }

        .activeItem {
            border-left: 5px solid #0480FB;
            background-color: #D9ECFF;
            color: #0480FB;
            transform: translate(-2px);
        }
    }
}

.closeNewbieGuidance {
    transform: translate(100vw, 0);
}

.openNewbieGuidance {
    transform: translate(0);
}

.closeContent {
    transform: translate(500px, 0);
}

.openContent {
    transform: translate(0);
}

/* 滚动条轨道样式 */
::-webkit-scrollbar {
    width: 2px;
    /* 设置滚动条宽度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background-color: #888;
    /* 设置滑块背景颜色 */
    border-radius: 4px;
    /* 设置滑块圆角 */
}

/* 滚动条轨道hover状态样式 */
::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1;
    /* 设置轨道hover状态时的背景颜色 */
}

/* 滚动条滑块hover状态样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 设置滑块hover状态时的背景颜色 */
}

.chooseIndex {
    color: #0480FB;

    .text {
        text-decoration: underline;
    }
}
</style>